<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹窗实例</title>
</head>

<body>


  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <div id="Application">
    <div class="main" v-show="showAd">
      <div class="sec">
        <div class="set">
          <button @click="offAd()">x</button>
        </div>

        <div class="ad_box">
          <div class="ad_main">
            <h2>标题</h2>
            <span>广告内容</span>
          </div>
        </div>
      </div>
      <button @click="clearCookie()">清除Cookie</button>
    </div>
  </div>
  <script>
    const App = Vue.createApp({
      setup() {
        //////////////////////////////////////////
        //删除Cookie
        const clearCookie = () => {
          document.cookie =
            "adCookie=show;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        };
        //////////////////////////////////////////
        //默认显示广告
        const showAd = Vue.ref(true);
        //关闭广告方法
        const offAd = () => {
          showAd.value = false;
        };
        //挂载广告前判断cookie
        Vue.onBeforeMount(() => {
          if (getCookie("adCookie") == "") {
            //没有adCookie就添加一个adCookie
            //document.cookie = "adCookie = show";
            //设置过期时间
            let d = new Date();
            // d.setTime(d.getTime() + 24 * 60 * 60 * 1000);//24小时
            // d.setTime(d.getTime() + 1 * 60 * 60 * 1000);//1小时
            //d.setTime(d.getTime() + 1 * 60 * 1000);//1分钟
            // ad=popup-ad   键值对形式：name=key   expires 有效期
            //d.setTime(d.getTime() + 24 * 60 * 60 * 1000); //生成距现在24小时后的时间
            d.setTime(d.getTime() + 1 * 5 * 1000); //1分钟
            document.cookie =
              "adCookie = show;path=/;expires= " + d.toUTCString();
          } else {
            //有adCookie就隐藏广告
            showAd.value = false;
          }
        });

        //拿到Cookie
        const getCookie = (Name) => {
          //cookie
          var search = Name + "=";
          var returnValue = "";
          if (document.cookie.length > 0) {
            var offset = document.cookie.indexOf(search);
            if (offset !== -1) {
              offset += search.length;
              var end = document.cookie.indexOf(";", offset);
              if (end == -1) {
                end = document.cookie.length;
              }
              returnValue = decodeURIComponent(
                document.cookie.substring(offset, end)
              );
            }
          }
          return returnValue;
        };

        return {
          showAd,
          offAd,
          clearCookie,
        };
      },
    });
    App.mount("#Application");
  </script>

  <style>
    .main {
      display: flex;
      position: fixed;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 9999;
      justify-content: center;
      transition: 0.3s ease-out;
      flex-direction: column;
      align-items: center;
      background: var(--heo-maskbgdeep);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .main .sec {
      width: 80%;
      height: 500px;
      margin: 0.9rem auto;
    }

    .main .sec .set button {
      width: 35px;
      height: 35px;
      position: fixed;
      right: 100px;
      top: 50px;
      font-size: 35px;
      color: var(--heo-fontcolor);
      cursor: pointer;
      transition: 0.3s;
      display: flex;
      font-size: 24px;
      padding: 1px 8px;
    }

    .main .sec .ad_box {
      width: 60%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;

      overflow: hidden;
    }

    .main .sec .ad_main {
      background: var(--card-bg);
      border-radius: 12px;
      overflow: hidden;
      border: var(--style-border);
      box-shadow: var(--heo-shadow-border);
      padding: 40px;
    }

    .main {
      --card-bg: #fff;
      --style-border: 1px solid var(--heo-card-border);
      --heo-card-border: #e3e8f7;
      --heo-shadow-border: 0 8px 16px -4px #2c2d300c;
      --heo-fontcolor: #363636;
      --heo-maskbgdeep: rgba(255, 255, 255, 0.85);
    }
  </style>
</body>

</html>